<template>
  <view class="home">
    <u-sticky :offset-top="top" v-if="scrollTop > 84">
      <v-nav-bar-sticky :home="home" :nav-bar="navBar" />
    </u-sticky>
    <v-nav-bar :home="home" :nav-bar="navBar" />
    <v-search />
    <v-search-tip :list="other.search_key" />
    <v-swiper :home="swiperList" />
    <v-text :list="other.text" />
    <v-nav :nav="nav" />
    <v-area :home="home" v-if="false" />
    <!-- 推荐商品 -->
    <v-recommend :home="home" />
    <v-swiper11 :home="swiper11" />
    <v-attr :home="home" />
    <v-swiper12 :home="swiper12" />
    <v-brand :home="home" />
    <v-swiper13 :home="swiper13" />
    <v-shop :home="home" />
    <!-- 回顶部 -->
    <u-back-top bottom="200" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.88'}"></u-back-top>
    <!-- 查看全部商品 -->
    <view class="show-product" @click.stop="goAllProduct" v-if="showAllProduct">发现更多商品</view>
  </view>
</template>

<script>
import NavBar from '../components/home/NavBar'
import NavBarSticky from '../components/home/NavBarSticky'
import Nav from '../components/home/Nav'
import SearchTip from '../components/home/SearchTip'
import Area from '../components/home/Area'
import Swiper from '../components/home/Swiper'
import Swiper11 from '../components/home/Swiper11'
import Swiper12 from '../components/home/Swiper12'
import Swiper13 from '../components/home/Swiper13'
import Shop from '../components/home/Shop'
import Brand from '../components/home/Brand'
import Search from '../components/home/Search'
import Text from '../components/home/Text'
import Recommend from '../components/home/Recommend'
import Attr from '../components/home/Attr'

import HomeModel from '../../../api/home'
import LastModel from '../../../api/last'
import base64 from '../../../util/base64'
const homeModel = new HomeModel()
const lastModel = new LastModel()

import { isAppPlatform, navTabHeight } from '../../../util/platform'
// import { saveHome, getHome } from '../../../util/PageCache'

export default {
  // 滚动
  props: ['scrollTop', 'refresh', 'tab'],
  components: {
    'v-nav-bar': NavBar,
    'v-nav-bar-sticky': NavBarSticky,
    'v-search-tip': SearchTip,
    'v-swiper': Swiper,
    'v-swiper11': Swiper11,
    'v-swiper12': Swiper12,
    'v-swiper13': Swiper13,
    'v-nav': Nav,
    'v-area': Area,
    'v-recommend': Recommend,
    'v-attr': Attr,
    'v-shop': Shop,
    'v-brand': Brand,
    'v-text': Text,
    'v-search': Search,
  },
  data() {
    return {
      // 数据
      home: {},
      other: {},
      // 状态栏与导航栏高度
      navBar: {},
      // #ifdef H5
      top: -44,
      // #endif
      // #ifdef APP-PLUS || MP-WEIXIN
      top: 0,
      // #endif
      swiperList: [],
      nav: [],
      swiper11: [],
      swiper12: [],
      swiper13: [],
      showAllProduct: false
    }
  },
  watch: {
    refresh: {
      handler(newTime, oldTime) {
        // console.log(oldTime, newTime, newTime - oldTime)
        // 大于3秒才执行
        if (newTime - oldTime > 3 * 1000 && this.tab.url === '/pages/index/index') {
          this.$store.dispatch('Uni/set_home', null).then(() => {})
          this.fetch()
        }
      }
    },
    // 显示全部商品
    scrollTop(v) {
      if (v > 500) {
        this.showAllProduct = true
      } else {
        this.showAllProduct = false
      }
    }
  },
  methods: {
    last() {
      lastModel.home().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.other = data
      })
    },
    fetch() {
      homeModel.getHome().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.home = data
      })
    },
    fetchx() {
      const cache = this.$store.getters['Uni/home']
      if (!cache || true) {
        // uni.showLoading({
        //   title: '加载中...'
        // })
        homeModel.getHome().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Uni/set_home', data).then(() => {
            // uni.hideLoading()
            // this.home = data
            this.app_name = data.app
            this.recommend = data.recommend
            this.attr = data.attr
            this.brand = data.brand
            this.shop = data.shop
            // console.log('home: ',this.home)
          })
        })
      } else {
        this.home = cache
      }
    },
    // handleScroll(e) {
    //
    // }
    // 加载主要轮播图
    swiper() {
      // 分开写, 加载速度快
      homeModel.getHomeSwiper().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.swiperList = data.swiper
      })
      homeModel.getHomeSwiperMiddle().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.swiper11 = data.swiper11
        this.swiper12 = data.swiper12
        this.swiper13 = data.swiper13
      })
      homeModel.getHomeNav().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.nav = data.nav
      })
    },
    // 跳转全部商品
    goAllProduct() {
      uni.navigateTo({
        url: '/sub_product/all/index'
      })
    }
  },
  created() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 10
    })
    // 设置导航高度
    this.navBar = navTabHeight()
    // 获取数据
    this.swiper()
    this.last()
    this.fetch()
  },
  mounted() {
  }

}
</script>

<style scoped lang="scss">
.home {
  background-image: url('#{$base_url}/mini/bg/home.png');
  //background-size: cover;
  background-size: 750rpx 750rpx;
  background-repeat: no-repeat;
  background-position: center top;
  //margin-bottom: -190px;
  //padding-top: 10px;
  //box-sizing: border-box;
  //height: 190px;
  /*#ifdef MP-WEIXIN | APP-PLUS   */
  padding-bottom: 100rpx;
  /*#endif */
  // 查看全部商品
  .show-product {
    //margin: 20rpx;
    //padding: 20rpx;
    font-size: 24rpx;
    color: white;
    //text-align: center;
    //border-radius: 10rpx;
    position: fixed;
    left: 0;
    bottom: 200rpx;
    width: 24rpx;
    padding: 20rpx 15rpx;
    //background: $main_color;
    background: #323232;
    writing-mode: bt-lr;
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    opacity: 0.75;
  }
}
</style>
